<template>
  <div>
    <el-page-header @back="goBack"></el-page-header>
    <br>
    <el-container>
      <span>学院概况 >></span>
      <span style="color: #20a0ff"> &nbsp&nbsp{{this.universityName}}&nbsp&nbsp&nbsp&nbsp</span>
      <span style="color: #20a0ff"> {{this.collegeName}}&nbsp&nbsp&nbsp&nbsp  </span>
      <el-main>
        <el-form ref="searchForm" :model="queryInfo" label-width="20px">
          <el-row gutter="20">
            <el-col :span="3" offset="16">
              <el-select  v-model="yiyuLabel" size="small" filterable clearable placeholder="抑郁程度" clearable>
                <el-option
                  v-for="item in this.yiyuList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-col>
            <el-col :span="3" >
              <el-select v-model="sType" size="small" filterable clearable placeholder="学生类型" clearable>
                <el-option
                  v-for="item in this.sList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-col>
            <el-col :span="2"  >
              <el-button type="primary" size="mini" @click="initData">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-main>

    </el-container>

    <el-container>
      <el-main>
        <el-card>
          <div id="bar1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
          </div>
        </el-card>
        <el-header height="40px"></el-header>
      </el-main>
    </el-container>
    <el-container>
      <el-main>
        <el-card style="height: 500px;width: 100%">
          <div class="radar">
            <div style="line-height: 50px">&nbsp</div>
            <div id="radar1" style="display:flex">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main3" style="margin:auto;width:250px;height: 300px"></div>
            </div>
          </div>
        </el-card>
      </el-main>
      <el-main>
        <el-card style="height: 500px;width:100%">
          <div style="display:flex;margin-top: 3%">
            <div style="margin:auto">
              <el-table
                :data="tableData"
                stripe
                :row-style="{height:'45px'}"
                :cell-style="{padding:'0px'}"
                style="font-size: 14px;width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266',height:'45px'}">
                <el-table-column
                  prop="index"
                  label="序号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="省份名称"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="人数"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="ratio"
                  label="比例"
                  width="150">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "collegeProvince",
        data() {
            return {
                stuData: [],//生源分布柱状图
                sexRatio: [],//性别圆环图数据
                universityName: "",
                collegeName: "",
                barX: {data: []},//柱状图x轴
                barSeries: [{name: '数量', type: 'bar', barWidth: 60, data: []}],//柱状图数据
                tableData: [],
                sexMap:{},
                sType:"",
                yiyuLabel:"",
                sList:[{
                    label:'初中',
                    value: 3
                }, {
                    label:'高中',
                    value: 4
                },{
                    label:'大专',
                    value: 5
                }, {
                    label:'本科',
                    value: 0
                },{
                    label:'硕士',
                    value: 1
                }, {
                    label:'博士',
                    value: 2
                }],
                yiyuList:[{
                    label:'轻度抑郁',
                    value: 0
                }, {
                    label:'中度抑郁',
                    value: 1
                },{
                    label:'重度抑郁',
                    value: 2
                }]
            }
        },
        created() {
            this.initData();
        },
        watch: {
            stuData() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initBarEcharts();

                })
            },
            sexRatio() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initCircleEcharts();
                })
            },
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            initData() {
                this.universityName = this.$route.query.universityName
                this.collegeName = this.$route.query.info.name

                //sType:学生类别  【"" 所有都有   0 本科 1硕士 2博士 3初中 4高中 5大专】
                //yiyuLabel：代表查询抑郁的程度 【"" 所有都有   0 轻度抑郁  1 中度抑郁  2 重度抑郁】
                this.$axios.post("managementSystem/report/getCollegeSrc", {"collegeId": this.$route.query.info.id,"sType":this.sType,"yiyuLabel":this.yiyuLabel})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                //后面修改为具体接口
                                var total = 0
                                // this.stuData = [{"name": "北京", "num": 20}, {"name": "上海", "num": 35}, {
                                //     "name": "广州",
                                //     "num": 15
                                // }, {"name": "深圳", "num": 18}, {"name": "武汉", "num": 10}, {
                                //     "name": "重庆",
                                //     "num": 13
                                // }, {"name": "成都", "num": 12}, {"name": "杭州", "num": 22}]
                                this.stuData = data.data.stuData
                                // this.sexRatio = [{"name": "男", "value": 100}, {"name": "女", "value": 50}]
                                this.sexRatio=data.data.sexRatio
                                this.sexMap={}
                                for (var i = 0; i < this.sexRatio.length; i++){
                                    this.sexMap[ this.sexRatio[i]["name"]]= this.sexRatio[i]["value"]
                                }
                                this.barX.data=[]
                                this.barSeries[0]["data"]=[]
                                for (var i = 0; i < this.stuData.length; i++) {
                                    this.barX.data.push(this.stuData[i]["name"])
                                    this.barSeries[0]["data"].push(this.stuData[i]["num"])
                                    total += this.stuData[i]["num"]
                                }
                                this.tableData = this.stuData
                                for (var i in this.tableData) {
                                    this.tableData[i]["index"] = parseInt(i) + 1;
                                    this.tableData[i]["ratio"] = (this.tableData[i]["num"] / total).toFixed(2) + "%"
                                }
                            }
                        }
                    })
            },
            initBarEcharts() {
                // 实例化echarts对象
                console.log(document.getElementById('main1'))
                let myChartDrawer = this.$echarts.init(document.getElementById('main1'))

                // 绘制条形图
                var option = {
                    title: {
                        text: '生源院系分布',
                        x: 'center',//x轴方向对齐方式
                    },
                    legend: {
                        data: ['数量'],
                        top: 5,
                        x: 'right',//x轴方向对齐方式
                        padding: [30, 70, 0, 0]
                    },
                    //X轴
                    xAxis: this.barX,
                    // Y轴
                    yAxis: {},
                    // 数据
                    series: this.barSeries
                };

                myChartDrawer.setOption(option);
            },
            initCircleEcharts() {
                // 基于准备好的dom，初始化echarts实例
                this.chartPie = this.$echarts.init(document.getElementById('main3'), 'macarons');
                this.chartPie.setOption({
                    title: {
                        text: '性别比例',
                        x: 'center',
                        padding: [20, 70, 0, 0]
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                    },
                    legend: {
                        data: ['男', '女',],
                        left: "center",
                        top: "bottom",
                        orient: "horizontal",
                        padding: [0, 0, 0, 0]
                    },
                    series: [
                        {
                            name: '性别比例',
                            type: 'pie',
                            radius: ['50%', '60%'],
                            center: ['50%', '60%'],
                            color: ['#20a0ff', '#5AD8A6'],
                            data: [
                                {value: this.sexMap["男"], name: '男'},
                                {value: this.sexMap["女"], name: '女'},
                            ],
                            //animationEasing: 'cubicInOut',
                            animationDuration: 2600,

                        }
                    ]
                });
            },
        }
    }
</script>

<style scoped>
  .el-main {
    color: #333;
    /* text-align: center; */
    line-height: 20px !important;
  }
</style>
